import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loadHighlightTheme } from '@/plugins/highlight'
import type { LayoutSettings } from './types/layoutSettings'
import { GET_STYLE, defaultStyles, SET_STYLE } from '@/utils/style'
import { ElMessage } from 'element-plus'
export const useLayoutStore = defineStore('layout', () => {
  // 使用LayoutSettings类型定义单个状态对象
  const layoutSettings = ref<LayoutSettings>(GET_STYLE() ? GET_STYLE() : defaultStyles())

  // 切换布局类型
  const toggleLayoutType = (newLayoutType: 'vertical' | 'horizontal' | 'hybrid') => {
    if('hybrid'===newLayoutType){
      ElMessage({
        message: '功能开发中...',
        type: 'warning',
      })
      return
    }
    layoutSettings.value.layoutType = newLayoutType
  }

  // 添加标签
  const addTag = (tag: { name: string; path: string; fixed?: boolean }) => {
    // 检查标签是否已存在
    const existingTag = layoutSettings.value.tags.find(t => t.path === tag.path)
    if (!existingTag) {
      layoutSettings.value.tags.push(tag)
    }
    // 更新当前激活的标签路径
    layoutSettings.value.currentPath = tag.path
    SET_STYLE(layoutSettings.value)
  }

  // 移除标签
  const removeTag = (path: string) => {
    const index = layoutSettings.value.tags.findIndex(tag => tag.path === path)
    if (index !== -1) {
      layoutSettings.value.tags.splice(index, 1)
    }
    SET_STYLE(layoutSettings.value)
  }

  // 关闭所有标签（保留固定标签）
  const closeAllTags = () => {
    layoutSettings.value.tags = layoutSettings.value.tags.filter(tag => tag.fixed)
    // 如果当前激活的标签被关闭，则激活第一个标签
    if (layoutSettings.value.tags.length > 0 &&
      !layoutSettings.value.tags.some(tag => tag.path === layoutSettings.value.currentPath)) {
      layoutSettings.value.currentPath = layoutSettings.value.tags[0].path
    }
    SET_STYLE(layoutSettings.value)

  }

  // 更新当前激活的标签路径
  const updateCurrentPath = (path: string) => {
    layoutSettings.value.currentPath = path
    SET_STYLE(layoutSettings.value)

  }

  // 切换侧边栏显示状态
  const toggleSidebar = () => {
    layoutSettings.value.sidebarHidden = !layoutSettings.value.sidebarHidden
    SET_STYLE(layoutSettings.value)

  }

  // 切换logo显示状态
  const toggleLogo = () => {
    layoutSettings.value.logoHidden = !layoutSettings.value.logoHidden
    SET_STYLE(layoutSettings.value)

  }

  // 切换主题
  const toggleTheme = async () => {
    layoutSettings.value.theme = layoutSettings.value.theme === 'light' ? 'dark' : 'light'

    let html = document.documentElement
    layoutSettings.value.theme === 'dark' ? html.className = 'dark' : html.className = ''

    // 同步更新highlight.js的主题样式
    await loadHighlightTheme(layoutSettings.value.theme)
    SET_STYLE(layoutSettings.value)

  }

  // 切换全屏
  const toggleFullscreen = () => {
    layoutSettings.value.fullscreen = !layoutSettings.value.fullscreen
    if (layoutSettings.value.fullscreen) {
      document.documentElement.requestFullscreen()
    } else {
      document.exitFullscreen()
    }
    SET_STYLE(layoutSettings.value)

  }

  // 返回状态和方法
  return {
    layoutSettings,
    toggleLayoutType,
    addTag,
    removeTag,
    closeAllTags,
    updateCurrentPath,
    toggleSidebar,
    toggleLogo,
    toggleTheme,
    toggleFullscreen
  }
})